<template>
  <t-layout-page>
    <t-layout-page-item>
      <h4 style="margin-top: 0;">单选</h4>
      <t-select
        placeholder="请选择工序"
        v-model="selectVlaue"
        :optionSource="stepList"
        valueKey="label"
        @change="($event,'single')"
      />
    </t-layout-page-item>
    <t-layout-page-item>
      <h4 style="margin-top: 0;">多选</h4>
      <t-select
        placeholder="请选择工序"
        v-model="selectVlaue1"
        multiple
        :optionSource="stepList1"
        valueKey="label"
        @change="selectChange($event,'multiple')"
      />
    </t-layout-page-item>
  </t-layout-page>
</template>
<script>
export default {
  data() {
    return {
      selectVlaue1: null,
      stepList1: [
        { label: '开始' }, { label: 'POSUI' }, { label: '11' }, { label: 'GX123' }, { label: '烘干破碎' }, { label: '车间仓库' }, { label: 'ui3333' }, { label: 'hhh333' }],
      selectVlaue: null,
      stepList: [
        { label: '开始' }, { label: 'POSUI' }, { label: '11' }, { label: 'GX123' }, { label: '烘干破碎' }, { label: '车间仓库' }, { label: 'ui3333' }, { label: 'hhh333' }]
    }
  },
  methods: {
    selectChange(val, type) {
      if (type === 'multiple') {
        console.log(`多选`, val, this.selectVlaue1)
      } else {
        console.log(`单选`, val, this.selectVlaue1)
      }
    }
  }
}
</script>